<template lang="pug">
  .zgplugin-table-list.zgplugin-empty(v-if="(!exist || !show)&&editor")
    svg-icon.empty-icon(icon-class="组件自配列表")
  el-form-item.zgplugin-table-list(v-show="show" v-else-if="exist"  :class="config.label?'':'form-label-hidden'" :prop="config.propertyName" :rules="rules")
    el-button.float-right.mb-2(type="primary" :disabled="readonly" @click="addRow" v-if="isShowAddButton") 增加
    el-table.table-list(border  :data='rootForm.properties[config.propertyName]')
      el-table-column(v-for="(item,index) in config.options" :prop="item.value" :key="item.value+index" :label="item.label" :min-width="item.width")
        template(slot-scope="scope")
          component(style="margin-top:0" :is="item.type + 'PluginRender'" :readonlyMain="readonly||scope.row._readonly" :editor="editor" :config="getItemConfig(item)" :scope='scope.row' :ref="'cell_'+scope.$index+index+'_'+item.config.propertyName")
      el-table-column(label="操作" min-width="80" fixed="right")
        template(slot-scope="scope")
          el-button(type="danger" size="mini" :disabled="readonly||scope.row._readonly" icon="el-icon-delete" @click="removeTableList(scope.$index)")
</template>
<script>
import inputPluginRender from '../../input/PC/render'
import selectPluginRender from '../../select/PC/render'
import datePluginRender from '../../date/PC/render'
import radioPluginRender from '../../radio/PC/render'
import textPluginRender from '../../../meta/text/PC/render'
import inputCommon from '../../../../mixin/inputCommon'
import { invokeInterface } from '../../../../service'
import _ from 'lodash'
export default {
  name: 'render',
  props: ['config', 'editor'],
  inject: ['rootForm'],
  mixins: [inputCommon],
  components: { inputPluginRender, selectPluginRender, datePluginRender, radioPluginRender, textPluginRender },
  data() {
    return {
      default: []
    }
  },
  computed: {
    isShowAddButton() {
      if (!this.config.isShowAddButton && this.config.isShowAddButton !== false) {
        return true
      }
      return !!this.getParsedEx('isShowAddButton')()
    }
  },
  methods: {
    getItemConfig(item) {
      item.config.label = ''
      return item.config
    },
    addRow() {
      let obj = {}
      for (let i = 0; i < this.config.options.length; i++) {
        obj[this.config.options[i].value] = undefined
      }
      this.rootForm.properties[this.config.propertyName].push(obj)
    },
    removeTableList(index) {
      this.rootForm.properties[this.config.propertyName].splice(index, 1)
      this.$nextTick(() => {
        // this.validate()
      })
    },
    validate() {
      let res = true
      this.rootForm.properties[this.config.propertyName].forEach((item, index) => {
        this.config.options.forEach((one, oIndex) => {
          if (this.$refs['cell_' + index + oIndex + '_' + one.config.propertyName] && this.$refs['cell_' + index + oIndex + '_' + one.config.propertyName][0].validate() !== true) {
            res = false
          }
        })
      })
      return res
    },
    initData() {
      if (this.config.initConnectType === 'interface' && this.config.dataInterfaceId) {
        this.linkSearchExVal = this.getParsedEx('linkSearchEx')()
        let params = { }
        if (this.config.linkSearch) {
          let v = this.getParsedEx('linkSearchEx')()
          if (v !== 0) {
            v = v || ''
          }
          params[this.config.linkSearchQueryKey] = v
          if (!v) {
            return
          }
        }
        this.initLoading = true
        invokeInterface(this.config.dataInterfaceId, params).then(data => {
          this.rootForm.properties[this.config.propertyName] = _.uniqWith(this.rootForm.properties[this.config.propertyName].concat(data), _.isEqual)
        }).finally(() => {
          this.initLoading = false
        })
      } else if (this.config.initConnectType === 'customGetter' && this.config.customGetter) {
        let initData = this.getParsedFn('customGetter')() || []
        this.rootForm.properties[this.config.propertyName] = _.uniqWith(this.rootForm.properties[this.config.propertyName].concat(initData), _.isEqual)
      }
    }
  },
  created() {
    // 初始化数据 数据字典
    if (!this.rootForm.properties['__noInitData' + this.config.propertyName] && this.config.initConnectType) {
      this.initData()
      this.rootForm.properties['__noInitData' + this.config.propertyName] = true
    }
    // 关联值变化了  初始化数据刷新
    if (this.config.initConnectType === 'interface' && this.config.dataInterfaceId && this.config.linkSearch) {
      this.$watch(this.getParsedEx('linkSearchEx'), (newValue) => {
        this.rootForm.properties[this.config.propertyName] = []
        this.initData()
      })
    } else if (this.config.initConnectType === 'customGetter' && this.config.customGetter) {
      this.$watch(this.getParsedFn('customGetter'), (newValue) => {
        this.rootForm.properties[this.config.propertyName] = []
        this.initData()
      })
    }
    var checkValue = (rule, value, callback) => {
      let validate = this.validate()
      if (!this.readonly && !validate) {
        return callback(new Error(' '))
      } else {
        callback()
      }
    }
    this.rules.push({ validator: checkValue, trigger: 'blur' })
    // _.forEach(this.config.options, (one, index) => {
    //   console.log(index)
    //   // if (!one.config.label) {
    //   this.rootForm.noWatch = true
    //   one.config.label = one.label
    //   // }
    // })
    // this.rootForm.noWatch = false
  }
}
</script>
<style lang="scss">
  .zgplugin-table-list {
    .table-list {
      .el-date-editor {
        width: 100% !important;
        .el-input__inner {
          width: 100% !important;
        }
      }
      .scope-success {
        .el-input__inner {
          border-color: #05C700 !important;
        }
      }
      .scope-normal {
        .el-input__inner {
          border-color: #ccc !important;
        }
      }
      td{
        padding:0!important;
      }
      .scope-label{
        height: 22px;
        line-height: 22px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

  }
</style>
<style lang="scss" scoped>
  .zgplugin-table-list {
    margin-bottom: 0px !important;
    margin-top: 16px;
  }
</style>
